<template>
  <a-card>
    <!--查询区域-->
    <div style="margin-bottom: 15px; text-align: left">
      <a-form layout="inline" @keyup.enter.native="handleSearch">
        <a-row>
          <a-col :span="6">
            <a-form-item label="姓名">
              <a-input placeholder="请输入姓名" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="性别">
              <a-select placeholder="请选择性别" style="width:200px" v-model="queryParam.sex">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" icon="search"
                      @click="handleSearch">查询</a-button>
            <a-button type="primary" icon="reload" style="margin-left: 10px" @click="handleReset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--操作按钮区域-->
    <div style="margin-bottom: 15px;text-align: left">
      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
    </div>
    <!--table区域-->
    <a-table :columns="columns" :data-source="data" bordered :pagination="pagination" rowKey="id"  @change="handleTableChange">
      <template slot="sex" slot-scope="text,record">
        <a-tag v-if="text === 1" color="green">男</a-tag>
        <a-tag v-if="text === 2" color="orange">女</a-tag>
      </template>
      <template slot="option" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm
            title="删除后不可恢复，您确定删除吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDelete(record)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <!--新增编辑对话框-->
    <a-modal v-model="visible" :title="title" @ok="handleOk" okText="确定"
             cancelText="取消">
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span:
12 }" >
        <a-form-item label="姓名">
          <a-input placeholder="请输入用户姓名" v-decorator="['name',{
rules: [{ required: true, message: '请输入用户姓名!' }] }]"></a-input>
        </a-form-item>
        <a-form-item label="年龄">
          <a-input-number placeholder="请输入用户年龄" v-decorator="
['age']" style="width: 100%"></a-input-number>
        </a-form-item>
        <a-form-item label="性别">
          <a-select v-decorator="['sex']">
            <a-select-option :value="1">男</a-select-option>
            <a-select-option :value="2">女</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>


<script>
import axios from 'axios'
export default {
  name: "UserList",
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          scopedSlots: {customRender: 'sex'},
        },
        {
          title: '年龄',
          dataIndex: 'age',
        },
        {
          title: '操作',
          dataIndex: 'option',
          width: 147,
          align: 'center',
          scopedSlots: { customRender: 'option' },
        },
      ],
      data: [
        {
          id: 1,
          name: '刘备',
          sex: 1,
          age: 18,
        },
        {
          id: 2,
          name: '孙尚香',
          sex: 2,
          age: 20,
        },
      ],
      // 查询条件
      queryParam: {},
      // 新增编辑相关
      visible: false,
      title:"",
      form: this.$form.createForm(this),
      // 主键
      id: null,
      //分页参数
      pagination:{
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['3', '5', '10'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
    }
  },
  methods: {
    /**
     * 新增
     */
    handleAdd() {
      this.visible = true
      this.title = "新增"
// 重置表单
      this.form.resetFields()
      this.id = null
    },
    /**
     * 编辑
     */
    handleEdit(record) {
      console.log(record);
      this.visible = true
      this.title = "编辑"
      // 重置表单
      this.form.resetFields()
      // 为表单设置值，$nextTick作用是确保表单节点更新完成后再赋值
      this.$nextTick(()=> {
        this.form.setFieldsValue({'name':
          record.name,'age':record.age,'sex':record.sex})
        this.id = record.id
      })
    },
    /**
     * 新增编辑提交
     */
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('表单数据通过校验: ', values);
          //发送请求，保存数据
          let _this = this
          let url = null
          if(_this.id){
            values.id = _this.id;
            url = "http://localhost:8090/user/edit"
          }else{
            url = "http://localhost:8090/user/addUser"
          }
          axios.post(url, values)
              .then(function (response) {
                // 处理成功情况
                console.log(response);
                _this.$message.info(response.data);
                _this.visible = false;
                _this.queryPage();
              })
              .catch(function (error) {
                // 处理错误情况
                console.log(values);
              })
              .finally(function () {
                // 总是会执行
              });
        }
      });
    },
    /**
     * 删除
     *
     * @param record
     */
    handleDelete(record) {
      console.log(record)
      let _this = this;
      axios.get("http://localhost:8090/user/delete?id="+ record.id)
          .then(function (response){
            console.log(response)
            _this.$message.info("删除成功");
            _this.queryPage();
          })
          .catch(function (error){
            console.log(error);})
          .finally(function () {});
    },
    /**
     * 搜索
     */
    handleSearch() {
      console.log(this.queryParam)
      this.pagination.current = 1;
      this.queryList()
    },
    /**
     * 重置
     */
    handleReset() {
      this.queryParam = {}
      this.queryList()
    },

    /**
     * 表格发生变化时
     */
    handleTableChange(pagination) {
      console.log(pagination);
      this.pagination = pagination;
      this.queryPage();
    },

    queryList() {
      let param = this.queryParam;
      let _this = this;
      axios.get("http://localhost:8090/user/getAll",{
        params: _this.queryParam})
          .then(function (response){
            _this.data = response.data;
            console.log(response.data)
          })
          .catch(function (error){
            console.log(error);})
          .finally(function () {});
    },
    queryPage(){
      let _this = this;
      let param = this.queryParam;
      param.pageNo = _this.pagination.current;
      param.pageSize = _this.pagination.pageSize;
      axios.get("http://localhost:8090/user/queryPage",{params:param})
          .then(function (response) {
            // 处理成功情况
            _this.data = response.data.records;
            _this.pagination.total = response.data.total;
            console.log(response);
          })
          .catch(function (error) {
            // 处理错误情况
            console.log(error);
          })
          .finally(function () {
            // 总是会执行
          });
    }
  },
  created() {
    this.queryPage()
  }
}
</script>
<style scoped>
</style>